<template>
  <el-dialog
    :model-value="addModulShoe"
    :before-close="beforeCloseFn"
    title="添加用户"
  >
    <el-form :model="form" :rules="rules" ref="addDialogForm">
      <el-form-item
        label="账号: "
        prop="username"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.username" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item
        label="姓名: "
        prop="nickName"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.nickName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="邮箱: " prop="email" :label-width="formLabelWidth">
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item
        label="密码: "
        prop="password"
        :label-width="formLabelWidth"
      >
        <el-input v-model="form.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="备注: " prop="note" :label-width="formLabelWidth">
        <el-input
          v-model="form.note"
          :rows="2"
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
      <el-form-item
        label="是否启用: "
        prop="status"
        :label-width="formLabelWidth"
      >
        <el-radio-group v-model.number="form.status">
          <el-radio :label="1" size="small">是</el-radio>
          <el-radio :label="0" size="small">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('cancel')">取消</el-button>
        <el-button type="primary" @click="myconfirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessageBox, FormInstance } from "element-plus";
import { reactive, ref, watch } from "vue";
// 父传子数据
const props = withDefaults(
  defineProps<{
    addModulShoe: boolean;
    admin: IAddPaylaod;
    addModulState: number;
  }>(),
  {
    addModulShoe: false,
  }
);
// 子传父事件
const emit = defineEmits<{
  (event: "cancel"): void;
  (event: "myconfirm", form: IAddPaylaod): void;
  (event: "restore"): void;
}>();
const formLabelWidth = "100px";
// 表单dom
const addDialogForm = ref();

const form: IAddPaylaod = reactive({
  email: "",
  nickName: "",
  note: "",
  password: "",
  username: "",
  status: "",
});
watch(
  () => props.addModulState,
  (newVal) => {
    console.log(props.addModulState);
    if (newVal == 0) {
      // 数据回显
      Object.assign(form, props.admin);
    } else {
      // 清空表单内容
      addDialogForm.value?.resetFields();
      Object.assign(form, {
        email: "",
        nickName: "",
        note: "",
        password: "",
        username: "",
        status: "",
      });
    }
  }
);
// 关闭之前
const beforeCloseFn = () => {
  emit("cancel");
  // 通知父级恢复默认值
  emit("restore");
};
// 校验事件
const validatorFn = (rule: any, value: any, callback: any) => {
  let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  if (value === "") {
    callback("邮箱不能为空");
  } else if (!reg.test(value)) {
    callback("邮箱格式不正确");
  } else {
    console.log(value);
    callback();
  }
};
// 表单校验
const rules = reactive({
  email: [{ required: true, validator: validatorFn, trigger: "blur" }],
  nickName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  status: [{ required: true, message: "请选择是否启用" }],
});
const myconfirm = () => {
  ElMessageBox.confirm("此操作将添加当前用户信息, 是否继续?", "提示", {
    type: "warning",
  })
    .then((res) => {
      addDialogForm.value
        ?.validate()
        .then(() => {
          emit("myconfirm", form);
          // 清空表单内容
          addDialogForm.value?.resetFields();
          console.log("表单清空");
        })
        .catch(() => {});
    })
    .catch((err) => err);
};
// 表单校验
</script>
<style scoped></style>
